<template>
    <div class="login_container">
        <el-row>
            <!-- :xs是栅格系统，屏幕宽度<=768时 -->
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" :model="logInfo" :rules="rules">
                    <h1>Hello</h1>
                    <h2>欢迎来到本系统</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="logInfo.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" :prefix-icon="Lock" v-model="logInfo.password"
                            show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" class="login_button" @click="login(logInfo)">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
// 引入用户仓库
// import useUserStore from '@/store/user';
// 引入路由
import router from '@/router';
// 引入报错时的提示信息
import { ElNotification } from 'element-plus';
// 引入request
import request from '@/utils/request'

// let loading = ref(false)

// let useStore = useUserStore()

let logInfo = reactive({
    username: '',
    password: ''
})
// 用户名校验
const check_username = (rule: any, value: any, callback: any) => {
    if (value.length < 5)
        return callback(new Error('用户名必须超过5个字符'))
    else if (value.length > 10)
        return callback(new Error('用户名不能超过10个字符'))
    else callback()
}
// 密码校验
const check_password = (rule: any, value: any, callback: any) => {
    if (value.length < 6 || value.length > 16)
        return callback(new Error('密码的长度必须在6~16位之间'))
    else if (!/^[0-9a-zA-Z_]{1,}$/.test(value))
        return callback(new Error('密码只能包含数字、字母和下划线'))
    else return callback()
}



// 定义用户名和密码的校验规则
const rules = {
    username: [{ validator: check_username, trigger: 'change' }],
    password: [{ validator: check_password, trigger: 'change' }]
}

const login = async (logInfo: any) => {
    // loading.value = true

    router.push('/')
    // 这里写登录逻辑
    try {
        // await useStore.userLogin(logInfo)
        // 用localstorage存储token，以此当作登录
        const result = await request('/login', logInfo)
        console.log(result)
        const token: any = result.data.token.
            localStorage.setItem('token', token)
        // loading.value = false
        router.push('/')
        ElNotification({
            type: 'success',
            title: `Hi,你好`,
            message: '欢迎回来'
        })
    } catch (error) {
        // loading.value = false
        ElNotification({
            type: 'error',
            message: (error as Error).message
        })
    }
    // console.log(35, logInfo)
}
</script>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/img/千铃.jpg') no-repeat;
    background-size: cover;

    h1 {
        font-size: 52px;
        color: #fff;
    }

    h2 {
        margin: 20px 0;
        font-size: 20px;
        color: #fff;
    }

    .login_form {
        width: 80%;
        margin-top: 200px;
        padding: 20px;
        background: rgba(96, 180, 249, 0.3);
        border-radius: 10px;

        .login_button {
            width: 100%;
            background-color: rgb(104, 202, 248);
        }
    }
}
</style>